<!--
 * @Author: 陈迪秀 1170776994@qq.com
 * @Date: 2024-02-25 08:38:18
 * @LastEditors: 陈迪秀 1170776994@qq.com
 * @LastEditTime: 2024-03-04 12:00:07
 * @FilePath: \stell-mall\src\components\echarts-map\echarts.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->

<script lang="ts" setup>
import { ref, onMounted, onUnmounted, defineEmits } from "vue";
import { chainData } from "./busData";
import { citiesData } from "./constants";
//  按需引入 echarts
import * as echarts from "echarts";
import { chainJson } from "./mapJson/china";
const echartsInstance1 = ref<any>(null);
const emit = defineEmits(["toCities"]);
const resizeFn = () => {
  echartsInstance1.value.resize();
};
// 图标显示数据
const LableDataFilter = () => {
  const citiesArr = Array.from(citiesData, ({ name }) => name);
  const data = chainJson.features.filter((item) =>
    citiesArr.includes(item.properties.name)
  );
  data.forEach((item) => {
    item.name = item.properties.name;
    item.value = item.properties.cp;
    item.zipCode = item.id.substring(0, 2);
  });
  return data;
};

const init = async (
  name: string,
  activeName: string = null,
  busData: Array<any> = []
) => {
  echarts.registerMap(name, chainJson);
  // console.log(chainJson, busData);
  echartsInstance1.value = echarts.init(document.querySelector(".echarts1"));
  echartsInstance1.value.setOption({
    // 设置标题和副标题及副标题跳转链接
    title: {
      show: false,
      text: "产业资源地图",
      subtext: "遍布全国的产业资源地图",
      // sublink: 'https://news.qq.com//zt2020/page/feiyan.htm'
      left: "center",
    },
    // 数据提示框
    tooltip: {
      show: false,
      trigger: "item", // item放到数据区域触发
      formatter: `{b}<br/>${activeName}{c}家`, // 提示数据格式br表示换行，地图 : {a}（系列名称），{b}（区域名称），{c}（合并数值）, {d}（无）
    },
    geo: {
      name: "china", // 系列名称
      type: "map", // 系列类型，地图
      map: name, // 要使用的地图，即上面注册的地图名称
      roam: false, // 开启鼠标缩放和平移漫游
      // data: busData,
      itemStyle: {
        normal: {
          borderColor: "rgba(0, 0, 0, 0)",
          areaColor: {
            type: "linear-gradient",
            x: 0,
            y: 300,
            x2: 0,
            y2: 0,
            colorStops: [
              {
                offset: 0,
                color: "rgba(0, 0, 0, 0)", // 0% 处的颜色
              },
              {
                offset: 1,
                color: "rgba(0, 0, 0, 0)",
              },
            ],
            global: true, // 缺省为 false
          },
        },
      },
      tooltip: {
        show: false,
      },
    },
    // 工具栏
    toolbox: {
      show: true,
      orient: "horizontal",
      left: "right",

      feature: {
        dataView: { readOnly: false },
        restore: {},
        saveAsImage: {},
      },
    },
    // 分段映射方案：
    // visualMap默认是连续映射，我们也可以设置为分段型，对于分布范围广的数据
    // 使用透明度来区分疫情严重情况
    visualMap: {
      show: false,
      type: "piecewise",
      backgroundColor: "red",
      pieces: [
        { gt: 1500, color: "#A7CCFE" }, // (1500, Infinity]
        { gt: 1000, lte: 1500, color: "#A7CCFE", colorAlpha: 1 }, // (1000, 1500]
        { gt: 500, lte: 1000, color: "#A7CCFE", colorAlpha: 0.8 },
        { gt: 300, lte: 500, color: "#A7CCFE", colorAlpha: 0.6 },
        { gt: 100, lte: 300, color: "#A7CCFE", colorAlpha: 0.4 },
        { gt: 50, lte: 100, color: "#A7CCFE", colorAlpha: 0.2 },
        { lt: 50, color: "#A7CCFE", colorAlpha: 0.1 }, // (-Infinity, 100)
      ],
    },
    // legend: {
    //   orient: "vertical",
    //   top: "bottom",
    //   left: "right",
    //   data: ["医院"],
    //   textStyle: {
    //     color: "#fff",
    //   },
    // },
    // 具体数据
    series: [
      {
        name: "china", // 系列名称
        type: "map", // 系列类型，地图
        map: name, // 要使用的地图，即上面注册的地图名称
        roam: false, // 开启鼠标缩放和平移漫游
        label: {
          // 图形上的文本标签，地图默认显示数据名
          show: true,
          formatter: "{b}", // b是数据名，c是数据值
          fontSize: 12,
          color: "#1678ff",
          offset: [-5, 10],
        },
        data: busData,
        itemStyle: {
          //    # 在未设置dataRange或	visualMap时设置有效
          normal: {
            borderColor: "#c9e4fd",
            // borderWidth: 0.8,

            areaColor: {
              type: "linear-gradient",
              x: 0,
              y: 300,
              x2: 0,
              y2: 0,
              colorStops: [
                {
                  offset: 0,
                  color: "#E6EEFF", // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: "#E6EEFF",
                },
              ],
              global: true, // 缺省为 false
            },
          },
          emphasis: {
            shadowColor: "rgba(0, 0, 0, 0.2)",
            shadowBlur: 10,
            shadowOffsetX: 5,
            shadowOffsetY: 5,
            areaColor: {
              type: "linear-gradient",
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  // color: "rgba(243, 174, 48, 0)", // 0% 处的颜色
                  color: "#9DC7FF", // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: "#9DC7FF",
                },
              ],
            },
          },
        },
      },

      //图标
      {
        name: "china",
        type: "scatter",
        coordinateSystem: "geo",
        data: LableDataFilter(),
        encode: {
          value: 2,
        },
        symbolSize: 22,
        symbol:
          "image://https://gggj-fe.oss-cn-hangzhou.aliyuncs.com/steel-mall/map.png",
        symbolOffset: [-5, -10],
        label: {
          normal: {
            show: false,
            textStyle: {
              color: "#fff",
              lineHeight: 15,
            },
            // formatter(params) {
            //   return params.data.value[2];
            // },
          },
        },

        itemStyle: {
          normal: {
            color: "#6495ED", //标志颜色
            opacity: 0.8,
            borderColor: "#aee9fb",
            borderWidth: 0.6,
          },
        },
        showEffectOn: "render",
        rippleEffect: {
          brushType: "stroke",
        },
      },
      {
        name: "china",
        type: "effectScatter",
        coordinateSystem: "geo",
        symbolSize: 10,
        encode: {
          value: 2,
        },
        showEffectOn: "render",
        rippleEffect: {
          brushType: "stroke",
        },
        label: {
          formatter: "{b}",
          position: "right",
          show: true,
        },
        itemStyle: {
          shadowBlur: 10,
          shadowColor: "#333",
        },
        emphasis: {
          scale: true,
        },
        zlevel: 1,
      },
    ],
  });
  echartsInstance1.value.on("click", async (params: any) => {
    // console.log("点击", params);
    emit("toCities", params);
  });
  window.addEventListener("resize", resizeFn);
};
// 释放内存
onUnmounted(window.addEventListener.bind(null, "resize", resizeFn));
onMounted(() => {
  init("china", "设计院", chainData);
});
defineExpose({ init });
</script>

<template>
  <div class="echarts1" style="width: 1088px; height: 630px"></div>
</template>

<style scoped></style>
